<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2 v-if="noaccess">{{i18n('plugins.no-access')}}</h2>
            <h2 v-else> {{i18n('plugins.user-account')}} </h2>
        </template>
    </cly-header>
    <cly-main>
        <div class="bu-columns bu-is-gapless">
            <div class="bu-column bu-is-12">
                <h3 class="bu-mb-4"> {{i18n('plugins.user-configs')}} &nbsp;</h3>
                <cly-section>
                    <div class="bu-columns bu-m-0">
                        <div class="bu-column bu-is-8 bu-mr-4">
                            <cly-form
                                :initial-edited-object="userData"
                                @submit="save">
                                <template v-slot="formScope">
                                    <cly-form-step :id="formId">
                                        <cly-inline-form-field rules="required" :label="i18n('user-settings.username')" prop="username">
                                            <el-input :placeholder="i18n('user-settings.username')" v-model="formScope.editedObject.username"></el-input>
                                        </cly-inline-form-field>
                                        <cly-inline-form-field rules="required" :label="i18n('management-users.full-name')" prop="full_name">
                                            <el-input :placeholder="i18n('management-users.full-name')" v-model="formScope.editedObject.full_name" @input="nameChanged"></el-input>
                                        </cly-inline-form-field>
                                        <cly-inline-form-field rules="required" :label="i18n('user-settings.api-key')" prop="api_key">
                                            <el-input :placeholder="i18n('user-settings.api-key')" v-model="formScope.editedObject.api_key"></el-input>
                                        </cly-inline-form-field>
                                        <cly-inline-form-field :label="i18n('management-users.password')">
                                            <el-button @click="changePassword.showDialog = true">{{i18n('user-settings.change-password')}}</el-button>
                                        </cly-inline-form-field>
                                        <div :key="configKey" v-for="(userConf, configKey) in userConfigs">
                                        <cly-inline-form-field :key="key" :label="getLabelName(configKey, key)" v-for="(conf, key) in userConfigs[configKey]">
                                            <div 
                                                v-if="getInputType(configKey, key) === 'function'" 
                                                v-html="predefinedInputs[configKey + '.' + key](conf)">
                                            </div>
                                            <el-input
                                                v-else-if="getInputType(configKey, key) === 'el-input'" 
                                                @input="onChange(configKey, key, $event)"
                                                :value="conf"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs"
                                                >
                                            </el-input>
                                            <el-select 
                                                v-else-if="getInputType(configKey, key) === 'el-select'" 
                                                :value="conf"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs">
                                                <el-option :key="option.value" :value="option.value" :label="option.label" v-for="option in predefinedInputs[configKey + '.' + key].list"></el-option>
                                            </el-select>
                                            <el-slider 
                                                v-else-if="getInputType(configKey, key) === 'el-slider'" 
                                                @change="onChange(configKey, key, $event)"
                                                :value="conf"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs">
                                            </el-slider>
                                            <el-button
                                                v-else-if="getInputType(configKey, key) === 'el-button'" 
                                                @click="predefinedInputs[configKey + '.' + key].click()"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs">
                                                {{predefinedInputs[configKey + '.' + key].label}}
                                            </el-button>
                                            <el-switch 
                                                v-else-if="getInputType(configKey, key) === 'el-switch'"
                                                @change="onChange(configKey, key, $event)"
                                                :value="conf"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs">
                                            </el-switch>
                                            <el-input-number 
                                                v-else-if="getInputType(configKey, key) === 'el-input-number'" 
                                                @change="onChange(configKey, key, $event)"
                                                :max='2147483647' 
                                                :min='0' 
                                                :value="conf"
                                                v-bind="predefinedInputs[configKey + '.' + key].attrs">
                                            </el-input-number>
                                            <el-input 
                                                v-else
                                                @input="onChange(configKey, key, $event)"
                                                :value="conf">
                                            </el-input>
                                        </cly-inline-form-field>
                                        </div>
                                        <div :key="key" v-for="(value, key) in components">
                                        <component v-if="value.component" v-bind:is="value.component" @change="onChange"></component>
                                        </div>
                                    </cly-form-step>
                                    <div class="bu-has-text-right">
                                        <el-button :disabled="!formScope.isSubmissionAllowed" @click="formScope.submit()" type="primary">{{i18n('common.apply')}}</el-button>
                                    </div>
                                </template>
                            </cly-form>
                        </div>
                        <div class="bu-column bu-is-3 bu-ml-4 bu-px-4 bu-py-0 account-settings-avatar-box">
                            <div class="bu-is-vcentered bu-px-3 bu-ml-4">
                                <el-upload 
                                    action="member/icon" 
                                    :on-success="handleAvatarSuccess"
                                    :data="uploadData"
                                    :show-file-list="true"
                                    :limit="1"
                                    name="member_image"
                                    accept="image/png, image/jpeg, image/gif"
                                    class="bu-is-pulled-right">
                                    <el-button size="small" type="text" class="bu-p-0">{{i18n('user-settings.upload')}}</el-button>
                                </el-upload>
                                <p class="bu-has-text-weight-medium">{{i18n('user-settings.profile-picture')}}</p>
                                <p class="bu-has-text-centered">&nbsp;<el-button 
                                    size="small" 
                                    type="text" 
                                    @click="deleteAvatar"
                                    v-if="userData.member_image"
                                    class="bu-p-0">{{i18n('management-users.delete')}}</el-button></p>
                                <div>
                                    <div class="account-settings-avatar" :style="avatar">
                                        <span v-if="!userData.member_image" class="has-ellipsis">{{initials}}</span>
                                    </div>
                                </div>
                                <p>&nbsp;</p>
                                <p class="account-upload-instructions">{{i18n('management-applications.icon-error')}}</p>
                            </div>
                        </div>
                    </div>
                </cly-section>
                <h3 class="bu-my-4"> {{i18n('configs.danger-zone')}} &nbsp;</h3>
                <cly-section class="bu-mr-4">
                    <template slot-scope="scope">
                        <div class="bu-columns bu-is-vcentered bu-p-3 bu-mx-1">
                            <div class="bu-column bu-is-10">
                                <p class="bu-has-text-weight-medium">{{i18n('configs.delete-account')}} </p>
                                <p class="text-medium">{{i18n('configs.cannot-be-undone')}} {{i18n('configs.will-permanently-delete')}}</p>
                            </div>
                            <div class="bu-column bu-is-2 bu-has-text-left">
                                <el-button @click="deleteAccount.showDialog = true" type="danger">{{i18n('configs.delete-account')}}</el-button>
                            </div>
                        </div>
                    </template>
                </cly-section>
            </div>
        </div>
        <cly-confirm-dialog @cancel="deleteAccount.showDialog = false" @confirm="submitDeleteDialog" :visible.sync="deleteAccount.showDialog" dialogType="danger" :saveButtonLabel="deleteAccount.saveButtonLabel" :cancelButtonLabel="deleteAccount.cancelButtonLabel" :title="deleteAccount.title" >
            <template slot-scope="scope">
                <ul>
                    <li>{{i18n('configs.cannot-be-undone')}}</li>
                    <li>{{i18n('configs.will-permanently-delete')}}</li>
                </ul>
                <span>{{i18n('configs.confirm-for-delete')}}</span>
                <cly-inline-form-field rules="required" :label="i18n('management-users.password')">
                    <el-input type="password" :placeholder="i18n('management-users.password')" v-model="deleteAccount.password"></el-input>
                </cly-inline-form-field>
            </template>
        </cly-confirm-dialog>
        <cly-confirm-dialog @cancel="changePassword.showDialog = false" @confirm="passwordDialog" :visible.sync="changePassword.showDialog" :saveButtonLabel="changePassword.saveButtonLabel" :cancelButtonLabel="changePassword.cancelButtonLabel" :title="changePassword.title" >
            <template slot-scope="scope">  
                <div>
                    <cly-form-field rules="required" :label="i18n('configs.current-password')">
                        <el-input type="password" :placeholder="i18n('configs.current-password')" v-model="changePassword.password"></el-input>
                    </cly-form-field>
                    <cly-form-field rules="required" :label="i18n('configs.new-password')" class="bu-pb-0">
                        <el-input type="password" :placeholder="i18n('configs.new-password')" v-model="changePassword.newPassword"></el-input>
                    </cly-form-field>
                    <cly-form-field rules="required" :label="i18n('configs.confirmation')">
                        <el-input type="password" :placeholder="i18n('configs.confirmation')" v-model="changePassword.confirmPassword"></el-input>
                    </cly-form-field>
                </div>
                <div class="account-settings-hint" >
                    <i v-if="changePassword.newPassword.length < security.password_min" class="far fa-circle"></i> 
                    <i v-else class="far fa-check-circle"></i> 
                    &nbsp;{{i18n('management-users.password.length', security.password_min)}}
                </div>
                <div class="account-settings-hint" v-if="security.password_char">
                    <i v-if="!/[A-Z]/.test(changePassword.newPassword)" class="far fa-circle"></i> 
                    <i v-else class="far fa-check-circle"></i> 
                    &nbsp;{{i18n('management-users.password.has-char')}}
                </div>
                <div class="account-settings-hint" v-if="security.password_number">
                    <i v-if="!/\d/.test(changePassword.newPassword)" class="far fa-circle"></i> 
                    <i v-else class="far fa-check-circle"></i> 
                    &nbsp;{{i18n('management-users.password.has-number')}}
                </div>
                <div class="account-settings-hint" v-if="security.password_symbol">
                    <i v-if="!/[^A-Za-z\d]/.test(changePassword.newPassword)" class="far fa-circle"></i> 
                    <i v-else class="far fa-check-circle"></i> 
                    &nbsp;{{i18n('management-users.password.has-special')}}
                </div>
            </template>
        </cly-confirm-dialog>
    </cly-main>
</div>